<template>
     <view>
         <p>12312</p>
      <view class="zooid" v-for="(item,index) of items"  @click="toFootTitle(item.name)" >
          <view class="img">
            <img :src="item.icon" >
          </view>
          <p :class="['colorChange',{on:index===idx}]"> {{ item.name }} </p>
      </view>
    </view>
</template>

<script>
export default {

    data() {
        return{
            items:[
            {
                name:"首页",
                icon:"static/image/index_gray.png",
                iconSelect:"static/image/index_black.png",
            },
            {
                name:"积分商城",
                icon:"static/image/classify_gray.png",
                iconSelect:"static/image/classify_black.png",
            },
            {
                name:"房象传媒",
                icon:"static/image/media.png",
                iconSelect:"static/image/cart_media.png",
            },
            {
                name:"我的",
                icon:"static/image/user_gray.png",
                iconSelect:"static/image/user_black.png",
            }
        ],    
        }
    },
    methods: {
        toFootTitle(str) {
            if (str == "首页") {
                this.$common.navigateTo("./index");
            } else if (str == "积分商城") {
                this.$common.navigateTo("../store/index");
            } else if (str == "房象传媒") {
                this.$common.navigateTo("../index/transmit/Transmit");
            } else if (str == "我的") {
                this.$common.navigateTo("../member/index/index");
            }
        }
    }

}
</script>

<style lang="scss" scoped>
    // .base{
    //     height: 100upx;
    //     width: 100%;
    //     background: #fff;
    //     border-top: 1px solid #999;
    //     position: fixed;
    //     bottom: 0;
    //     display: flex;
    //     justify-content: space-around;
    //     z-index: 99;
    // }
    .zooid .img{
        height: 40upx;
        width: 40upx;
        margin: 0 auto;
        margin-top: 15upx;
    }
    .zooid .img>img{
        height: 100%;
        width: 100%;
    }
    .zooid>p{
        margin-top: 10upx;
    }

    .on{
        color: red;
    }
</style>